<template>
  <div>
    <el-drawer :withHeader="false" :visible.sync="dialog" direction="rtl" :with-header="false" ref="drawer"
      size="638px">
      <div style="margin:20px" class="tree mt10">
            <el-tree :data="pModules" :props="defaultProps"
            node-key="id"
            :default-expanded-keys="[1]"
            :expand-on-click-node="false"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <el-input size="mini" v-model="data.moduleName"
                  v-if="data.needEdit===1"
                  :autofocus="true"
                  @blur="blur(data)"
                  class="edit"
                  ></el-input>
                <span v-if="data.needEdit===0||data.needEdit==null">{{ node.label }}</span>
                <span>
                  <el-button
                    v-show="data.superior===-1||data.superior===-2"
                    type="text"
                    size="mini"
                    @click="add(data)">
                    添加
                  </el-button>
                  <el-button
                    v-show="data.superior!==-2"
                    type="text"
                    size="mini"
                    @click="needEditModule(data)">
                    编辑
                  </el-button>
                  <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @onConfirm="remove(node, data)"
                    >
                      <el-button
                        v-show="data.superior!==-2"
                        slot="reference"
                        type="text"
                        size="mini"
                        style="margin-left: 8px">
                        删除
                      </el-button>
                  </el-popconfirm>
                </span>
              </span>
            </el-tree>
      </div>
      <div style="margin-left: 20px; margin-right: 20px">
        <el-divider content-position="left"></el-divider>
        <div style="float: right">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="dialog = false">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { getGroup } from '@/api/group';
  import { editModules } from '@/api/project'
  export default {
    name: "vueModulePop",
    data() {
      return {
        dialog: false,
        disabled: true,
        ruleForm: {
          describe: '',
          moduleName: '',
          groupLeader: '',
          groupId: '',
          choseMember: [],
          code: '',
          projectId: ''
        },
        pModules: [{
            id: 1,
            moduleName: '点击右侧添加模块',
            superior: -2,
            children:[],
          }],
        defaultProps: {
          children: 'children',
          label: 'moduleName'
        },
        data: {
          leaderList: [],
          memberList: []
        },
        groupList:[]
      }
    },
    methods: {
      add(data) {
        let newModule =
              {
                  moduleId: 0,
                  superior: data.superior===-2?-1:data.moduleId,
                  needEdit: 1,
                  moduleName: "",
                  children: []
              }
          if (data.children == null) {
            data.children = []
          }
          data.children.push(newModule)
      },
      blur(data) {
        data.needEdit = 0
        let moduleName = data.moduleName
        data.moduleName = ''
        data.moduleName = moduleName
      },
      remove(node, data) {
        let nodeId = node.data.$treeNodeId
        let i = 0
        this.pModules[0].children.forEach(mm => {
          if (this.pModules[0].children[i].children!=null && this.pModules[0].children[i].children.length>0) {
            let j = 0
            this.pModules[0].children[i].children.forEach(m3 => {
              if (m3.$treeNodeId===nodeId) {
                this.pModules[0].children[i].children.splice(j, 1)
              }
              j++
            })
          }
          if (mm.$treeNodeId===nodeId) {
            this.pModules[0].children.splice(i, 1)
          }
          i++
        })
      },
      needEditModule(data) {
        data.needEdit = 1
        let moduleName = data.moduleName
        data.moduleName = ''
        data.moduleName = moduleName
      },
      errorMessage(message) {
         this.$notify.error({
          title: '错误',
          message: message
        });
      },
      submitForm() {
        editModules(this.ruleForm, this.pModules[0].children).then(_=>{
          this.dialog = false
          this.$parent.$parent.handleClick()
        })
      },
      resetForm(formName) {
        if (this.$refs[formName]!=null) {
          this.$refs[formName].resetFields();
        }
      },
      clickNew(row) {
        this.dialog = true
        this.disabled = false
        this.ruleForm.projectId = row.projectId
        this.ruleForm.groupId = row.groupId
        if (row.pModules!==null) {
          this.pModules[0].children = row.modules
        } else {
          this.pModules[0].children = []
        }
        this.disabled = true
      },
      handleRemove(index) {
        this.pModules.splice(index, 1)
      },
      initData() {
        getGroup().then(response => {
          this.groupList = response
        })
      }
    },
    mounted() {
      this.initData()
    }
  }

</script>
<style>
.el-form-item__content{
  margin-left:0 !important;
}
.el-transfer-panel{
   height: 500px !important;
}
.el-transfer-panel__body {
  height: 430px !important;
}
.el-checkbox-group {
  height: 450px !important;
}
.form-input2{
      width: 502px;
}
.form-input3{
      width: 200px;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>

<style>
.edit.el-input--mini .el-input__inner {
  height: 23px !important;
  width: 100px !important;
  padding-left: 8px;
}
.el-tree {
  min-width: 100%;
  min-height: 505px;
  display: inline-block;
}
.tree {
  overflow:auto;
  max-height: 505px;
}
</style>
